<template>
	<view class="content">
		<view class="len">
			<label class="len-title">密码长度:</label>
			<picker @change="bindPickerChange" :value="index" :range="array" class="len-picker">
				<view class="uni-input">{{array[index]}}</view>
				<text class="iconfont iconsanjiaoxing1"></text>
			</picker>
		</view>
		<view class="password">
			{{password}}
		</view>
		
		<button type="primary" @click="refresh" class="refreshButton" >一键刷新</button>
		<button type="default" @click="cope" class="changeButton">一键复制</button>
		<button type="warn" @click="changePassword" class="changeButton">修改为当前密码</button>
	</view>
</template>


<script>
	
	var _self
	
	export default {
		data() {
			return {
				array:[10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25],
				index: 0,
				password: '',
				length: 10,
			}
		},
		onLoad() {
			_self = this
			this.randomString(false,this.length)
		},
		methods: {
			//一键复制
			cope() {
				uni.setClipboardData({
				    data: this.password,
				    success: function () {
				        uni.showToast({
				        	title:"复制成功",
							mask:false
				        })
				    }
				});
			},
			// 一键刷新
			refresh() {
				this.randomString(false,this.length)
			},
			randomString(randomLen, min, max){
			    var str = "",
				range = min,
				arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
					   'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k',
					   'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v',
					   'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F',
					   'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 
					   'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
			    // 随机产生
			    if(randomLen){
			        range = Math.round(Math.random() * (max-min)) + min;
			    }
			    for(var i=0; i<range; i++){
			        var pos = Math.round(Math.random() * (arr.length-1));
			        str += arr[pos];
			    }
			    this.password = str
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value,this.array[e.target.value] )
				this.index = e.target.value
				this.length = this.array[e.target.value] 
				this.randomString(false,this.length)
			},
			changePassword () {
				
				uni.showLoading({
					title:'修改中...',
					mask:false
				})
				
				var userInfo = this.getUser("userInfo")
				if(userInfo){
					uni.request({
						url: _self.basicUrl+"user",
						method: "POST",
						data: {
							openId: userInfo.openId,
							password: _self.password
						},
						success: function(res) {
							if(res.data.code === 20000){
								uni.showModal({
									content: '修改成功',
									showCancel: false
								});
							}else{
								console.log(res.data.data)
								uni.showModal({
									content: JSON.stringify(res),
									showCancel: false
								});
							}
						},
						fail: () => {
							uni.showModal({
								content: '网络错误',
								showCancel: false
							});
						},
						complete() {
							// 停止当前页面下拉刷新
							uni.hideLoading()
							// 刷新密码
							this.randomString(false,this.length)
						}
					})
				}else {
					uni.hideLoading()
					
					uni.showModal({
					    title: '提示',
					    content: '点击确认前往qq登录',
						showCancel: false,
					    success: function (res) {
					        if (res.confirm) {
					            uni.login({
					            	provider: 'qq',
					            	success(loginRes) {
					            		
					            		// 获取用户信息
					            		uni.getUserInfo({
					            			provider:"qq",
					            			success(info) {
					            				// console.log(JSON.stringify(info))
					            				// console.log(JSON.stringify(info.userInfo))
					            				uni.setStorageSync("userInfo",info.userInfo)
					            			}
					            		})
					            		
					            	}
					            })
					        } else if (res.cancel) {
					            console.log('用户点击取消');
					        }
					    }
					});
				}
				
				
			}

		},
	}
</script>

<style>
	.password {
		width: 70%;
		height: 80rpx;
		margin: 150rpx 120rpx;
		text-align: center;
		border-bottom: 2px solid #808080;
	}
	.len {
		margin: 50rpx 20rpx;
	}
	.len-title {
		display: inline-block;
		
	}
	.len-picker {
		display: inline-block;
	}
	.uni-input {
		display: inline-block;
		margin-left: 50rpx;
		border-bottom:2xp solid #4CD964;
	}
	.iconsanjiaoxing1 {
		font-size: 12px;
		margin-left: 10rpx;
	}
	.changeButton {
		width: 80%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		margin-top: 30rpx;
		border-radius: 30rpx;
	}
	.refreshButton {
		width: 80%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		margin-top: 400rpx;
		border-radius: 30rpx;
	}
</style>
